<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../src/three.js"></script>
    <script src="../src/OrbitControls.js"></script>
    <style>
        html,body{
            width: 100%;height: 100%;
        }
        #container{
            width: 100%;height: 100%;
        }
    </style>
</head>
<body>
    <div id="container"></div>
</body>

        <!-- 
            gl_Position = vec4(position,1.0); 
            modelMatrix         模型矩阵
            viewMatrix          视图矩阵(相机对象的世界矩阵逆矩阵)
            projectionMatrix    投影矩阵(相机对象的投影矩阵)
        -->
<script id="vertexShader" type="x-shader/x-vertex">
    void main(){
        gl_PointSize = 20.0;
        gl_Position = projectionMatrix*viewMatrix*modelMatrix*vec4(position,1.0);
    }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
    uniform vec3 color;
    void main(){
        // gl_FragColor = vec4(1.0,0.0,0.0,1.0);
        gl_FragColor = vec4(color,1.0);
    }
</script>
<script>
    window.onload = function(){
        let container = document.getElementById("container")
        let scene,camera,renderer,controller,mixer
        let plane,material,geometry
        init()
        function init(){
            scene = new THREE.Scene()
            camera = new THREE.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 1000)
            camera.position.set(20,20,20)
            camera.lookAt(scene.position)
            renderer = new THREE.WebGLRenderer({antialias: true})
            renderer.setSize(container.clientWidth, container.clientHeight)
            controller = new THREE.OrbitControls(camera, renderer.domElement)
            container.appendChild(renderer.domElement)
            var axesHelper = new THREE.AxesHelper( 20 )
            scene.add( axesHelper )

            geometry = new THREE.BoxBufferGeometry(10,10,10)
           
            material = new THREE.ShaderMaterial({
               // 调用 UniformsLib.js 中的 uniform 变量代码块
               uniforms:THREE.UniformsUtils.merge([
                   THREE.UniformsLib.points,
                   THREE.UniformsLib.fog
               ]),
               // 获得 ShaderLib 文件夹下面的 points_vert.glsl 代码
               vertexShader:THREE.ShaderChunk.points_vert,
               // 获得 ShaderLib 文件夹下面的 points_frag.glsl 代码
               fragmentShader:THREE.ShaderChunk.points_frag
            })
            // 重置 uniform 变量对应的属性值
            // 设置点的尺寸
            material.uniforms.size.value = 20.0
            // 设置点的颜色
            material.uniforms.diffuse.value.setRGB(0,1,0)
            var points = new THREE.Points(geometry,material)
            scene.add(points)

            animate()
        }
        function animate(){
            renderer.render(scene,camera)
            controller.update()
            requestAnimationFrame(animate)
        }
    }
</script>
</html>